/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2018-10-30 00:09:03
 * @Description: 告警类型TOP5
 */
define(function (require) {

  var LeftTop = {
    render: function (data) {
      /**
       *  引入tpl模版
       */
      var legendTpl = require('../templates/legend.tpl');

      var colors = ['#df4131', '#f6a93d', '#e9df3d', '#21fcd6', '#1dd5fb'];

      var max = data[0].value;
      data.forEach(function (d, i) {
        max = d.value > max ? d.value : max;
      });

      var legendHtml = Handlebars.compile(legendTpl)
      $('.left-top .legend').html(legendHtml(data))

      var renderData = [{
        value: [],
        name: "告警类型TOP5",
        symbol: 'none',
        lineStyle: {
          normal: {
            color: '#ecc03e',
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
              [{
                offset: 0,
                color: 'rgba(203, 158, 24, 0.8)'
              }, {
                offset: 1,
                color: 'rgba(190, 96, 20, 0.8)'
              }],
              false)
          }
        }
      }];
      data.forEach(function (d, i) {
        var value = ['', '', '', '', ''];
        value[i] = max,
        renderData[0].value[i] = d.value;
        renderData.push({
          value: value,
          symbol: 'circle',
          symbolSize: 12,
          lineStyle: {
            normal: {
              color: 'transparent'
            }
          },
          itemStyle: {
            normal: {
              color: colors[i],
            }
          }
        })
      });

      var indicator = [];
      data.forEach(function (d) {
        indicator.push({
          name: d.name,
          max: max,
          color: '#fff'
        })
      })

      var myChart = echarts.init(document.getElementById('radar'));
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: "item"
        },
        radar: {
          center: ["50%", "50%"],
          radius: "70%",
          startAngle: 90, // 起始角度
          splitNumber: 4,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          },
          axisLabel: {
            show: false,
            fontSize: 20,
            color: "#000",
            fontStyle: "normal",
            fontWeight: "normal"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.8)"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.5)"
            }
          },
          indicator: indicator
        },
        series: [{
          type: "radar",
          data: renderData
        }]
      });
    }
  }
  return LeftTop
})